<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目编辑器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .editor-section, .preview-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section-title {
            margin-top: 0;
            color: #444;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        .option-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .option-item input[type="text"] {
            flex-grow: 1;
            margin-right: 10px;
        }
        .option-item input[type="radio"] {
            margin-right: 15px;
        }
        .btn {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #45a049;
        }
        .btn-danger {
            background-color: #f44336;
        }
        .btn-danger:hover {
            background-color: #d32f2f;
        }
        .btn-secondary {
            background-color: #2196F3;
        }
        .btn-secondary:hover {
            background-color: #0b7dda;
        }
        .btn-group {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        .preview-question {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .preview-option {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .preview-option.correct {
            background-color: #e8f5e9;
            border-color: #a5d6a7;
        }
        .json-output {
            width: 100%;
            min-height: 100px;
            font-family: monospace;
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>题目编辑</h1>

    <!-- 编辑区域 -->
    <div class="editor-section">
        <div id="questionAndOption" class="form-group">
            <!--<div>
                <label for="question-text">题目内容</label>
                <textarea id="question-text" placeholder="请输入题目内容..."></textarea>
            </div>
            <div>
                <label>选项设置</label>
                <div id="options-container">
                </div>
                <button id="add-option-btn" class="btn btn-secondary">+ 添加选项</button>
            </div>-->
        </div>

        <!--<div class="form-group">
            <label for="question-text">题目内容</label>
            <textarea id="question-text" placeholder="请输入题目内容..."></textarea>
        </div>

        <div class="form-group">
            <label>选项设置</label>
            <div id="options-container">
                &lt;!&ndash; 选项将在这里动态添加 &ndash;&gt;
            </div>
            <button id="add-option-btn" class="btn btn-secondary">+ 添加选项</button>
        </div>-->

        <div class="btn-group">
            <!--<button id="preview-btn" class="btn">预览题目</button>
            <button id="save-btn" class="btn">保存题目</button>
            <button id="reset-btn" class="btn btn-danger">重置</button>-->
        </div>
    </div>

    <!-- 预览区域 -->
    <div class="preview-section" id="preview-section" style="display: none;">
        <h2 class="section-title">题目预览</h2>
        <div id="question-preview">
            <!-- 预览内容将在这里动态生成 -->
        </div>
    </div>

    <!-- 数据输出区域 -->
    <div class="editor-section">
        <h2 class="section-title">JSON 数据</h2>
        <pre id="json-output" class="json-output">编辑题目后，这里会显示JSON格式的数据...</pre>
        <div class="btn-group">
            <button id="copy-json-btn" class="btn">复制JSON</button>
        </div>
    </div>
</div>

<script>
    let questionContentStr = localStorage.getItem("questionContent");
    console.log(questionContentStr);

    fetch('/question/editQuestion/67', {
        method: 'POST',
        /*headers: {
            'Content-Type': 'application/json',
        },*/
        body: questionContentStr
    })
        .then(response => response.json())
        .then(data => {
            console.log(data.data)
            const questionContents = data.data;
            for (let i = 0; i < questionContents.length; i++) {
                let questionContent = questionContents[i];
                console.log(questionContent.question);
                const questionDiv = document.createElement('div');
                const questionId = 'question-' + i;
                const index = i+1;
                questionDiv.innerHTML = `
                    <div style="display: flex">
                        <label style="text-align: center">${index + '.'}</label>
                        <input type="text" id="${questionId}-text" value="${questionContent.question}">
                    </div>
                    <!--<label>选项设置</label>-->
                `;
                document.getElementById('questionAndOption').appendChild(questionDiv);

                if (questionContent.options != null) {
                    for (let j = 0; j < questionContent.options.length; j++) {
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'option-item';
                        const optionId = 'option-' + j;
                        let option = questionContent.options[j];
                        optionDiv.innerHTML = `
                    <div id="options-container">
                         <input type="text" id="${optionId}-text" value="${option}">
                    </div>
                    <!--<button class="btn btn-danger remove-option-btn">删除</button>-->
                    `
                        document.getElementById('questionAndOption').appendChild(optionDiv);
                    }
                }
            }
        })
        /*.then(response => {
            const questionArr = JSON.stringify(response);
            console.log(questionArr);
            //const result = JSON.parse(questionArr);
        })*/
        .catch(error => console.error('Error:', error));

    /*const questionContents = JSON.parse(questionContentStr)
    for (let i = 0; i < questionContents.length; i++) {
        let questionContent = questionContents[i];
        console.log(questionContent.question);
        const questionDiv = document.createElement('div');
        const questionId = 'question-' + i;
        const index = i+1;
        questionDiv.innerHTML = `
                    <div style="display: flex">
                        <label style="text-align: center">${index + '.'}</label>
                        <input type="text" id="${questionId}-text" value="${questionContent.question}">
                    </div>
                    <!--<label>选项设置</label>-->
                `;
        document.getElementById('questionAndOption').appendChild(questionDiv);

        if (questionContent.options != null) {
            for (let j = 0; j < questionContent.options.length; j++) {
                const optionDiv = document.createElement('div');
                optionDiv.className = 'option-item';
                const optionId = 'option-' + j;
                let option = questionContent.options[j];
                optionDiv.innerHTML = `
                    <div id="options-container">
                         <input type="text" id="${optionId}-text" value="${option}">
                    </div>
                    <!--<button class="btn btn-danger remove-option-btn">删除</button>-->
                    `
                document.getElementById('questionAndOption').appendChild(optionDiv);
            }
        }
    }*/


    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        //const questionText = document.getElementById('question-text');
        //const optionsContainer = document.getElementById('options-container');
        /*const addOptionBtn = document.getElementById('add-option-btn');
        const previewBtn = document.getElementById('preview-btn');
        const saveBtn = document.getElementById('save-btn');*/
        //const resetBtn = document.getElementById('reset-btn');
        //const previewSection = document.getElementById('preview-section');
        //const questionPreview = document.getElementById('question-preview');
        const jsonOutput = document.getElementById('json-output');
        const copyJsonBtn = document.getElementById('copy-json-btn');

        // 添加选项
        /*function addOption(optionText = '', isCorrect = false) {
            const optionId = 'option-' + Date.now();

            const optionDiv = document.createElement('div');
            optionDiv.className = 'option-item';

            /!*optionDiv.innerHTML = `
                    <input type="radio" name="correct-option" id="${optionId}-radio" ${isCorrect ? 'checked' : ''}>
                    <input type="text" id="${optionId}-text" placeholder="请输入选项内容..." value="${optionText}">
                    <button class="btn btn-danger remove-option-btn">删除</button>
                `;*!/
            optionDiv.innerHTML = `
                    <input type="text" id="${optionId}-text" placeholder="请输入选项内容..." value="${optionText}">
                    <button class="btn btn-danger remove-option-btn">删除</button>
                `;

            optionsContainer.appendChild(optionDiv);

            // 添加删除按钮事件
            const removeBtn = optionDiv.querySelector('.remove-option-btn');
            removeBtn.addEventListener('click', function() {
                optionsContainer.removeChild(optionDiv);
                updateJsonOutput();
            });

            // 添加选项内容变化事件
            const textInput = optionDiv.querySelector('input[type="text"]');
            textInput.addEventListener('input', updateJsonOutput);

            // 添加正确选项变化事件
            /!*const radioInput = optionDiv.querySelector('input[type="radio"]');
            radioInput.addEventListener('change', function() {
                updateJsonOutput();
            });*!/

            return optionDiv;
        }*/

        // 初始化添加两个选项
        /*addOption('', true);
        addOption();*/

        // 添加选项按钮事件
        /*addOptionBtn.addEventListener('click', function() {
            addOption();
        });*/

        // 更新JSON输出
        /*function updateJsonOutput() {
            const questionData = getQuestionData();
            jsonOutput.textContent = JSON.stringify(questionData, null, 2);
        }*/

        // 获取题目数据
        /*function getQuestionData() {
            //const question = questionText.value.trim();
            const question = "";
            const options = [];
            let correctIndex = -1;

            const optionItems = optionsContainer.querySelectorAll('.option-item');
            /!*optionItems.forEach((item, index) => {
                const text = item.querySelector('input[type="text"]').value.trim();
                const isCorrect = item.querySelector('input[type="radio"]').checked;

                if (text) {
                    options.push(text);
                    if (isCorrect) {
                        correctIndex = index;
                    }
                }
            });*!/

            return {
                question: question,
                options: options,
                correctIndex: correctIndex >= 0 ? correctIndex : null
            };
        }*/

        // 预览题目
        /*function previewQuestion() {
            const data = getQuestionData();

            let html = `<div class="preview-question">${data.question || '[未填写题目]'}</div>`;

            if (data.options.length > 0) {
                data.options.forEach((option, index) => {
                    const isCorrect = index === data.correctIndex;
                    html += `
                            <div class="preview-option ${isCorrect ? 'correct' : ''}">
                                ${String.fromCharCode(65 + index)}. ${option}
                                ${isCorrect ? ' (正确答案)' : ''}
                            </div>
                        `;
                });
            } else {
                html += '<div>暂无选项</div>';
            }

            questionPreview.innerHTML = html;
            previewSection.style.display = 'block';
            updateJsonOutput();
        }*/

        // 预览按钮事件
        //previewBtn.addEventListener('click', previewQuestion);

        // 保存按钮事件
        /*saveBtn.addEventListener('click', function() {
            const data = getQuestionData();
            // 这里可以替换为实际的保存逻辑，如发送到服务器
            alert('题目已保存（实际应用中这里会发送数据到服务器）');
            console.log('保存的数据:', data);
            updateJsonOutput();
        });*/

        // 重置按钮事件
        /*resetBtn.addEventListener('click', function() {
            if (confirm('确定要重置所有内容吗？')) {
                questionText.value = '';
                optionsContainer.innerHTML = '';
                addOption('', true);
                addOption();
                previewSection.style.display = 'none';
                updateJsonOutput();
            }
        });*/

        // 复制JSON按钮事件
        copyJsonBtn.addEventListener('click', function() {
            const jsonText = jsonOutput.textContent;
            navigator.clipboard.writeText(jsonText).then(function() {
                alert('JSON已复制到剪贴板');
            }, function() {
                alert('复制失败，请手动选择文本后复制');
            });
        });

        // 初始更新JSON
        //updateJsonOutput();
    });
</script>
</body>
</html>